<template>
    <div class="video-obj">
        <video autoplay controls width="100%" height="464" id="videoElement" crossorigin="anonymous" muted="muted"></video>
    </div>
</template>

<script>
import flvjs from 'flv.js'
export default {
    name: "video-obj",
    mounted() {
        this.$nextTick(() => {
            this.createVideo()
        })
    },
    methods: {
        createVideo() {
            if (flvjs.isSupported()) {
                var videoElement = document.getElementById('videoElement');
                var flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    url: 'https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv'
                });
                flvPlayer.attachMediaElement(videoElement);
                flvPlayer.load();
                flvPlayer.play();
            }
        }
    }
}
</script>

<style scoped>
.video-obj {
    box-shadow: 0 0 8px var(#F1F2F3, #e5e9ef);
    background-color: #000;
}
</style>